<template>
	<!-- 首页弹框管理 -->
	<div class="popup">
		<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
			<el-form-item label="执行状态：">
				<el-select v-model="ruleForm.status">
					<el-option v-for="item in stateList" :label="item.label" :value="item.id" :key="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间：" prop="time">
				<el-date-picker
				v-model="ruleForm.time"
				type="datetimerange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				:picker-options="pickerOptions"
				:readonly="pageType === 'view'"
				@change="changeDate"
				>
			</el-date-picker>
		</el-form-item>
		<el-form-item>
			<el-button type="primary"  @click="searchList" id="monitorEnter">查询</el-button>
			<el-button type="primary" @click="fn('add')">新建</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="tableData" border  style="width: 100%">
		<el-table-column type="index" label="序号" width="50"> </el-table-column>
		<el-table-column  prop="name"  label="APP" width="100" align="center">
			<template slot-scope="scope">
				{{scope.row.type | typeF}}
			</template>
		</el-table-column>
		<el-table-column  label="创建人" align="center">
			<template slot-scope="scope">
				<p class="pstyle">{{scope.row.createOperatorName}}</p>
				<p class="pstyle">{{scope.row.createOperatorPhone}}</p>
			</template>
		</el-table-column>
		<el-table-column prop="status" label="执行状态" align="center">
			<template slot-scope="scope">
				{{scope.row.status | statusF}}
			</template>
		</el-table-column>
		<el-table-column label="创建时间" align="center">
			<template slot-scope="scope">
				<TimeComp :timestamp="scope.row.createTime"></TimeComp>
			</template>
		</el-table-column>
		<el-table-column label="编辑时间" align="center">
			<template slot-scope="scope">
				<TimeComp :timestamp="scope.row.updateTime"></TimeComp>
			</template>
		</el-table-column>
		<el-table-column label="操作" align="center">
			<template slot-scope='scope'>
				<el-button type="text" @click="fn('edit',scope.row)" :disabled="scope.row.status == 1">编辑</el-button>
				<el-button type="text" @click="fn('disuse',scope.row)" v-show="scope.row.status === 1" :disabled="scope.row.btnDisabled">弃用</el-button>
				<el-button type="text" @click="fn('start',scope.row)" v-show="scope.row.status === 0" :disabled="scope.row.btnDisabled">启用</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="pagebar">
		<el-pagination
		background
		layout="total, sizes, prev, pager, next"
		:current-page.sync="currentPage"
		:page-sizes="[10, 20, 30, 40]"
		:page-size="pageSize"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:total="totalSize">
	</el-pagination>
</div>
</div>
</template>

<script>
import api from '@/api/apiPath'
import TimeComp from '../common/timeComp'

export default {
	name:'indexPopupManage',
	title:'首页弹窗管理',
	components: {TimeComp},
	data () {
		return {
			pageType: '',
			ruleForm: {
 	      type:0,// app类型
 	      status:null,//执行状态
 	      startTime:'',//开始时间
 	      endTime:'', //结束时间
 	      createOperatorName:'',//操作人
 	      createOperatorPhone:''
 	  },
 	  pickerOptions: {
 	  	disabledDate(time) {
 	      	//选择今天以及今天以前的日期 包含今天
 	      	return time.getTime() > Date.now() - 8.64e6;
 	      }
 	  },
 	  stateList: [
 	  {id: null, label: '全部'},
 	  {id: 1, label: '执行中'},
 	  {id: 0, label: '未执行'},
 	  ],
 	    tableData: [],//列表数据
 	    currentPage: 1,
 	    pageSize: 10,//每页几条
 	    totalSize: 0,
 	}
 },
 methods:{
		//查询时间
		changeDate (val) {
			const startTime1 = val ? val[0] : ''
			this.ruleForm.startTime = startTime1 ? new Date(startTime1).getTime() : undefined
			const endTime1 = val ? val[1] : ''
			this.ruleForm.endTime = endTime1 ? new Date(endTime1).getTime() : undefined
		},
		searchList () {
			let param = {}
			param.status = this.ruleForm.status
			param.startDate = this.ruleForm.startTime
			param.endDate = this.ruleForm.endTime
			param.pageNum = this.currentPage
			param.pageSize = this.pageSize
			this.axios.post(api.POPUPWINDOW, param).then(res => {
				if (res.data.code == 200) {
					res.data.data.rows.forEach(function (item,index,arr) {
						if (item['sort']) {
							item['sort'] = item['sort'].join('_');
						}
					});
					this.tableData = res.data.data.rows
					this.totalSize = res.data.data.total
				}
			})
		},
		fn (type,row) {
			if (type == 'add') {
				this.$router.push({path: '/indexPopupOperateDetail', query: {type: type}})
			}else if(type == 'disuse'){
				this.$confirm(`确定弃用弹框？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					let obj = {};
					obj.id = row.id;
					this.axios.post(api.POPUPWINDOWDEPRECATED + row.id, obj).then(res => {
						if (res.data.code == 200) {
							this.searchList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			}else if(type == 'start'){
				this.$confirm(`确定启用弹框？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					let tempobj = {};
					tempobj.id = row.id;
					this.axios.post(api.POPUPWINDOWENABLE + row.id, tempobj).then(res => {
						if (res.data.code == 200) {
							this.searchList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			}else if(type == 'edit') {
				this.$router.push({path: '/indexPopupOperateDetail', query: {type: type, id: row.id}})
			}
		},
		handleCurrentChange () {
			this.searchList()
		},
		handleSizeChange (val) {
			this.pageSize = val
			this.searchList()
		},
	},
	created () {
		this.searchList()
	},
	activated(){
		this.searchList()
	},
	filters: {
		typeF(val){
			if (val == 0) {
				return '经纪人端'
			} else if (val == 1) {
				return '好房端'
			} else if (val == 2) {
				return '管家端'
			}
		},
		statusF (val) {
			if (val == 1) {
				return '执行中'
			} else if (val == 0) {
				return '未执行'
			} else if (val == 3) {
				return '执行结束'
			}
		}
	}
}

</script>

<style lang="stylus">
.pstyle{
	margin: 0;
	padding: 0;
}
</style>
